<template>
  <div class="home">
    <div id="nav" :style="{opacity:opacity}">导航</div>
    <img alt="Vue logo" src="../assets/logo.png">
    <p><button @click="add">增加</button></p>
    <p  ref="test">DOM</p>
    <!-- <p>{{count}}</p> -->
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'Home',
  data(){
    return  {
      count:0,
      opacity:1
    }
  },
  methods:{
    add(){
      this.count++;
    },
    handleScroll(){
      var scrollTop = window.scrollY;
      var opacity = scrollTop/300;
      // console.log(opacity)
      if(opacity>1){
        opacity = 1
      }
      this.opacity = opacity;
      console.log(opacity)
    }
  },

  beforeCreate(){
    console.log("beforeCreate")
  },
  created(){
    console.log("created")
  },
  beforeMount(){
    console.log(this.$refs)
    console.log("beforeMount")
  },
  mounted(){
    console.log(this.$refs)
    console.log("mounted")
    window.addEventListener("scroll",this.handleScroll)
  },
  beforeUpdate(){
    console.log(" beforeUpdate")
  },
  updated(){
    console.log("update")
  },
  beforeDestroy(){
    console.log("beforeDestroy")
  },
  destroyed(){
    console.log("destroyed")
    window.removeEventListener("scroll",this.handleScroll)
  }
}
</script>
<style scoped>
#nav{
  top:0;
  left:0;
  width:100%;
  /* position: fixed; */
  height: 50px;
  background: #ff2d51;
  line-height: 50px;
  text-align: center;
}
.home{
  height: 3000px;
}
</style>
